<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="echarts.min.js" charset="utf-8"></script>
    <script src="china.js" charset="utf-8"></script>
</head>

<body>
    <div id="china">
      <div id="main" style="width: 100%;height:600px;"></div>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        /**
        *selectid String 必传 选择器Id
        *dataArr:Array 必须 是二维数组
        *legendArr: Array 必须 选择项数组  例如：['iphone3', 'iphone4', 'iphone5']  和dataArr的长度是一样的   必须相同
        *title: String 标题
        */
        var title = 'iphone销量';
        var legendArr = ['iphone3'];
        var dataArr = [
          [{
              name: '北京',
              value: Math.round(Math.random() * 1000)
          }, {
              name: '天津',
              value: Math.round(Math.random() * 1000)
          }, {
              name: '上海',
              value: Math.round(Math.random() * 1000)
          }, {
              name: '重庆',
              value: Math.round(Math.random() * 1000)
          }, {
              name: '河北',
              value: Math.round(Math.random() * 1000)
          }, {
              name: '河南',
              value: Math.round(Math.random() * 1000)
          }, {
              name: '陕西',
              value: Math.round(Math.random() * 1000)
          }],
        ];

        showChinaMap('main',legendArr,dataArr,title);
        window.onresize = function () {
          document.getElementById('china').innerHTML = '<div id="main" style="width: 100%;height:600px;"></div>';
          showChinaMap('main',legendArr,dataArr,title);
        }
        function showChinaMap(selectid,legendArr,dataArr,title) {
          // 设置地图数据
          var seriesArr = [];
          for (var i = 0; i < dataArr.length; i++) {
              seriesArr[i] = {
                name:legendArr[i],
                data: dataArr[i],
                type: 'map',
                mapType: 'china',
                roam: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },
              }
          };
          console.log(seriesArr);
          var option = {
              title: {
                  text: title,
                  x: 'center'
              },
              tooltip: {
                  trigger: 'item'
              },
              legend: {
                  orient: 'vertical',
                  x: 'left',
                  data: legendArr
              },
              dataRange: {
                  min: 0,
                  max: 2500,
                  x: 'right',
                  y: 'bottom',
                  text: ['高', '低'], // 文本，默认为数值文本
                  calculable: true
              },
              toolbox: {
                  show: true,
                  orient: 'vertical',
                  x: 'right',
                  y: 'center',
                  feature: {
                      // mark : {show: false},
                      dataView: {
                          show: true,
                          readOnly: true
                      },
                      // restore : {show: true},
                      saveAsImage: {
                          show: true
                      }
                  }
              },
              roamController: {
                  show: true,
                  x: 'right',
                  mapTypeControl: {
                      'china': true
                  }
              },
              series: seriesArr,
          };

          var myChart = echarts.init(document.getElementById(selectid));
          myChart.setOption(option);
        }
    </script>
</body>

</html>
